<template>
    <div class="father">
      <el-page-header @back="goBack" content="智能照明" class="header"></el-page-header>
      <div class="body">
        <div>
          <div class="body-item1">
          <img src="@/assets/l-taideng-zhu.png" width="100%">
        </div>
        <div class="body-item2">
          <div class="item2-item1" v-for="(item, index) in imgs" :key="index">
            <div v-for="(item1, index1) in item.srcs" :key="index1">
              <img :src="item1" width="100%">
            </div>
          </div>
        </div>
        </div>
      </div>
      <div class="hello_world">
        <button class="top" @click="toTop">
          <img src="@/assets/backToTop.png" width="100%">
        </button>
      </div>
      <div>
      </div>
    </div>
  </template>
  
  <script>
  import BScroll from 'better-scroll'
  export default {
    name: 'z_seven',
    data () {
      return {
        imgs: [
          { srcs: [require('@/assets/l-taideng-f1.png'), require('@/assets/l-taideng-f2.png'), require('@/assets/l-taideng-f3.png'),require('@/assets/l-taideng-f4.png') ] },
        ]
      }
    },
    methods: {
      goBack () {
        this.$router.go(-1)
      },
      toTop () {
        window.location.reload()
      }
    },
    mounted () {
      this.$nextTick(() => {
        // eslint-disable-next-line no-undef
        this.scroll = new BScroll('.body', {
          click: true,
          mouseWheel: true
        })
      })
    }
  }
  </script>
  
  <style scoped>
  
  .top{
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 100px;
    right: 5px;
    background-color: #fff;
    border: solid 1px gray;
    border-radius: 50%;
  }
  .body-item1{
    width: 450px;
    height: 50%;
  }
  .father{
    width: 450px;
    height: 100%;
  }
  .header{
    width: 100%;
    height:5%;
  }
  
  .body{
    width: 450px;
    height: 680px;
    overflow: hidden;
    background-color: #888;
  }
  </style>